{% extends 'base.html' %}

{% block head %}
	<link href="{{ path }}js/plugins/datatables/DT_bootstrap.css" rel="stylesheet">
	<link href="{{ path }}js/plugins/responsive-tables/responsive-tables.css" rel="stylesheet"> 

    <script src="{{ path }}js/plugins/colorpicker/js/bootstrap-colorpicker.js"></script>
    <script src="{{ path }}js/demos/demo.ui-elements.js"></script>
	<script src="{{ path }}js/plugins/timepicker/jquery.ui.timepicker.min.js"></script>
	
    <script src="{{ path }}js/demos/demo.tables.js"></script>
    <script src="{{ path }}js/plugins/datatables/jquery.dataTables.js"></script>
    <script src="{{ path }}js/plugins/datatables/DT_bootstrap.js"></script>
	<script src="{{ path }}js/plugins/responsive-tables/responsive-tables.js"></script>
	<script src="{{ path }}js/jquery.numeric.js"></script>

{% endblock %}

{% load humanize %}

{% block javascript %}
    function OnSubmitForm(){
        if(document.pressed == 'ImprimirCal'){
            document.frm_historial.action ="/cartera/estudiantes/calendario/imprimir/";
            return true;
        }
        
        if(document.pressed == 'EliminarHis'){
        	if($('input:checked').length < 1){
                alert("Debe seleccionar al menos un formulario.");
                return false;
            }
            document.frm_matriculas.action ="/cartera/estudiantes/matriculas/borrar/";
            document.frm_matriculas.target ="_self";
            return true;
        }
        
        if(document.pressed == 'ImprimirHis'){
            document.frm_matriculas.action ="/cartera/estudiantes/historial/imprimir/";
            document.frm_matriculas.target ="_blank";
            return true;
        }
		
    }
{% endblock %}


{% block jquery %}
		$("#valor-credito").numeric();
        
        $("#facultad").change(function () {
            $('#semestre').find('option').remove().end();
            $("#facultad option:selected").each(function () {
                semestres = $(this).attr("semestres") + " ";
            });
             
            for(i=0; i<=semestres; i++){
                $('#semestre').append($('<option></option>').attr('value', (i) ).text((i)));
            }
            
        });
        
        $( '#periodo' ).change(function(){
        	valor = $('#periodo option:selected').attr('meses');
            $('#cuotas').attr('value', valor);
		});
        
        $( '#cancelar' ).click(function() {
            location.href = "/cartera/buscar";
		});
        
        $( $(".acc_mat[id^='mat']") ).click(function() {
        	matricula_id = $(this).attr('matricula');
            cargarHistorial(matricula_id);
		});
		
		$( $(".acc_imp[id^='imp']") ).click(function() {
        	alert("Imprimiendo acuerdo de pago");
			url = "/cartera/estudiantes/matricula/acuerdo/" + $(this).attr('matricula');
            window.open(url);
		});
        
        
        $( $(".acc_edit[id^='edit']") ).click(function() {
        	matricula_id = $(this).attr('matricula');
			$.ajax({
                    url: "/cartera/estudiantes/matriculas/editar/",
                    type: "POST",
                    data : {matricula_id:matricula_id,
                            csrfmiddlewaretoken : $('#csrf_token >div >input').attr("value")
                             },
                    dataType: "html",
                    success: function(datos) {
                        $('#editar_matricula').html(datos);
                    }
                });
		});
        
        
        $( '#btn_pagar' ).click(function() {
        	if($('#pago_id').attr('value') != 0){
            	pago_id = $('#pago_id').attr('value');
                estudiante_id = $('#id_estudiante').attr('value');
                pagado = $('#pagado').attr('value');
                pagoobs = $('#pagoobs').attr('value');
                $.ajax({
                    url: "/cartera/estudiantes/pago/guardar/",
                    type: "POST",
                    data : {pago_id:pago_id, 
                            pagado:pagado, 
                            pagoobs:pagoobs,
                            csrfmiddlewaretoken : $('#csrf_token >div >input').attr("value")
                             },
                    dataType: "html",
                    success: function(datos) {
                        cargarMatriculas(estudiante_id);
                        cargarHistorial(datos);
                    }
                });
            }
            else{
            	alert("Debe crear primero el estudiante.");
            }
            
		});
        
        
        $( '#btn_editar' ).click(function() {
			if($('#matricula_editar_id').attr('value') != 0){
            	estudiante_id = $('#id_estudiante').attr('value');
            	matricula_id = $('#matricula_editar_id').attr('value');
                facultad = $('#mat_facultad').attr('value');
                periodo = $('#mat_periodo').attr('value');
                semestre = $('#mat_semestre').attr('value');
                credito = $('#mat_valor-credito').attr('value');
                cuotas = $('#mat_cuotas').attr('value');
                descuento = $('#mat_valor-descuento').attr('value');
				cuota_inicial = $('#mat_cuota-inicial').attr('value');
				fecha_inicial = $('#mat_fecha-inicial').attr('value');
				intereses = $('#mat_intereses').attr('value');
				
                if(facultad != 0 && periodo != 0){
                	$.ajax({
                        url: "/cartera/estudiantes/matriculas/guardar/",
                        type: "POST",
                        data : {estudiante_id:estudiante_id, 
                                matricula_id:matricula_id, 
                                facultad:facultad, 
                                periodo:periodo, 
                                semestre:semestre,
                                credito:credito, 
                                cuotas:cuotas,
								descuento:descuento,
								cuota_inicial:cuota_inicial,
								fecha_inicial:fecha_inicial,
								intereses:intereses,
                                csrfmiddlewaretoken : $('#csrf_token >div >input').attr("value")
                                 },
                        dataType: "html",
                        success: function(datos) {
                            $('#matriculas').html(datos);
                            $('#mat_facultad').attr('value', 0);
                            $('#mat_periodo').attr('value', 0);
                            $('#mat_semestre').attr('value', 0);
                            $('#mat_valor-credito').attr('value', 0);
							$('#mat_fecha-inicial').attr('value', 0);
							$('#mat_cuota-inicial').attr('value', 0);
							$('#mat_intereses').attr('value', 0);
							$('#mat_valor-descuento').attr('value', 0);
                            $('#mat_cuotas').attr('value', 0);
                        }
                    });
                }
                else{
                	alert("Debe seleccionar los campos obligatorios");
                }
			}
		});
        
        
        function cargarHistorial(matricula_id){
            $.ajax({
                    url: "/cartera/estudiantes/calendario/",
                    type: "POST",
                    data : {matricula_id:matricula_id,
                            csrfmiddlewaretoken : $('#csrf_token >div >input').attr("value")
                             },
                    dataType: "html",
                    success: function(datos) {
                        $('#historial').html(datos);
                        $('#facultad').attr('value', 0);
                        $('#periodo').attr('value', 0);
                        $('#semestre').attr('value', 0);
                        $('#valor-credito').attr('value', 0);
						$('#valor-descuento').attr('value', 0);
						$('#intereses').attr('value', 0);
						$('#cuota-inicial').attr('value', 0);
                        $('#cuotas').attr('value', 0);
                    }
                });
        }
        
        
        function cargarMatriculas(estudiante_id){
            $.ajax({
                    url: "/cartera/estudiantes/matriculas/",
                    type: "POST",
                    data : {estudiante_id:estudiante_id,
                            csrfmiddlewaretoken : $('#csrf_token >div >input').attr("value")
                             },
                    dataType: "html",
                    success: function(datos) {
                        $('#matriculas').html(datos);
                    }
                });
        }
        
		$( '#agregar' ).click(function() {
        	if($('#id_estudiante').attr('value') != 0){
            	estudiante_id = $('#id_estudiante').attr('value');
                facultad = $('#facultad').attr('value');
                periodo = $('#periodo').attr('value');
                semestre = $('#semestre').attr('value');
                credito = $('#valor-credito').attr('value');
				descuento = $('#valor-descuento').attr('value');
				cuota_inicial = $('#cuota-inicial').attr('value');
				fecha_inicial = $('#fecha-inicial').attr('value');
				intereses = $('#intereses').attr('value');
                cuotas = $('#cuotas').attr('value');
                
                if(facultad != 0 && periodo != 0){
                	$.ajax({
                        url: "/cartera/estudiantes/matriculas/guardar/",
                        type: "POST",
                        data : {estudiante_id:estudiante_id, 
                                facultad:facultad, 
                                periodo:periodo, 
                                semestre:semestre,
                                credito:credito, 
                                cuotas:cuotas,
								descuento:descuento,
								cuota_inicial:cuota_inicial,
								fecha_inicial:fecha_inicial,
								intereses:intereses,
                                csrfmiddlewaretoken : $('#csrf_token >div >input').attr("value")
                                 },
                        dataType: "html",
                        success: function(datos) {
                            $('#matriculas').html(datos);
                            $('#facultad').attr('value', 0);
                            $('#periodo').attr('value', 0);
                            $('#semestre').attr('value', 0);
                            $('#valor-credito').attr('value', 0);
							$('#valor-descuento').attr('value', 0);
							$('#intereses').attr('value', 0);
							$('#cuota-inicial').attr('value', 0);
                            $('#cuotas').attr('value', 0);
                        }
                    });
                }
                else{
                	alert("Debe seleccionar los campos obligatorios");
                }
            }
            else{
            	alert("Debe crear primero el estudiante.");
            }
            
		});
        
        $(function() {
            $( "#fecha-publicacion" ).datepicker();
        });
        $(function() {
            $( "#fecha-vencimiento" ).datepicker();
        });
		
		
		$( $(".paz_imp[id^='imp']") ).click(function() {
			url = "/cartera/estudiantes/matricula/pazysalvo/" + $(this).attr('matricula');
			window.open(url);
		});
{% endblock %}		


{% block ruta %}
		
{% endblock %}

{% block contenido %}
<div class="span12">	
<div class="widget">	      			
    <div class="widget-header">
        <h3>Listado de Estudiantes</h3>	      				
    </div> <!-- /.widget-header -->
    
    <div class="widget-content">
        
        <div class="tabbable">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab1" data-toggle="tab">Datos básicos</a></li>
                <li><a href="#tab2" data-toggle="tab">Datos de Matrícula</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab1">
                    <form id="datos-basicos" class="form-horizontal" action="/cartera/estudiantes/guardar/" method="post">
                    {% csrf_token %}
                    <table width="100%">
                        <tr>
                            <td width="50%"><div class="control-group">
                            <label class="control-label" for="input01">Primer Nombre: </label>
                            <div class="controls"><input type="text" class="input-medium" name="nombre1" id="nombre1" required="required" value="{{ estudiante.nombre1 }}"/></div>
                            </div></td>
                            
                            <td width="50%"><div class="control-group">
                            <label class="control-label" for="input01">Segundo Nombre: </label>
                            <div class="controls"><input type="text" class="input-medium" name="nombre2" id="nombre2" value="{{ estudiante.nombre2 }}"/></div>
                            </div></td>
                        </tr>
                        <tr>
                            <td><div class="control-group">
                            <label class="control-label" for="input01">Primer Apellido: </label>
                            <div class="controls"><input type="text" class="input-medium" name="apellido1" id="apellido1" required="required" value="{{ estudiante.apellido1 }}"/></div>
                            </div></td>
                            
                            <td><div class="control-group">
                            <label class="control-label" for="input01">Segundo Apellido: </label>
                            <div class="controls"><input type="text" class="input-medium" name="apellido2" id="apellido2" value="{{ estudiante.apellido2 }}"/></div>
                            </div></td>
                        </tr>
                        <tr>
                            <td><div class="control-group">
                            	<label class="control-label" for="input01">Documento</label>
                                <div class="controls"><input type="text" class="input-medium" name="documento" id="documento" required="required" value="{{ estudiante.identificacion }}"/></div>
                            </div></td>
                            
                            <td><div class="control-group">
                            	<label class="control-label" for="input01">Tipo Documento</label>
                                <div class="controls"><select class="input-medium" name="tipo-documento" id="tipo-documento">
                                    {% for documento in tipoDocumento %}
                                        <option value="{{ documento.id }}">{{ documento.nombre }}</option>
                                    {% endfor %}
                                </select></div>
                            </div></td>
                        </tr>
                        <tr>
                            <td><div class="control-group">
                            	<label class="control-label" for="input01">Dirección</label>
                            	<div class="controls"><input type="text" class="input-large" name="direccion" id="direccion" value="{{ estudiante.direccion }}"/></div>
                            </div></td>
                            
                            <td><div class="control-group">
                            	<label class="control-label" for="input01">Teléfono</label>
                            	<div class="controls"><input type="text" class="input-medium" name="telefono" id="telefono" value="{{ estudiante.telefono }}"/></div>
                            </div></td>
                        </tr>
                        <tr>
                            <td><div class="control-group">
                            	<label class="control-label" for="input01">Celular</label>
                            	<div class="controls"><input type="text" class="input-medium" name="celular" id="celular" required="required" value="{{ estudiante.celular }}"/></div>
                            </div></td>
                            
                            <td><div class="control-group">
                            	<label class="control-label" for="input01">Email</label>
                            	<div class="controls"><input type="email" class="input-large" name="email" id="email" required="required" value="{{ estudiante.email }}"/></div>
                            </div></td>
                        </tr>
                        <tr><td colspan="2">
                        	<div class="control-group">
                            <label class="control-label" for="input01">Observaciones</label>
                            <div class="controls"><textarea name="observacion" id="observacion" class="input-large" rows="3" placeholder="Observaciones de matrícula">{{ estudiante.observacion}}</textarea></div>
                            </div></td>
                        </tr>
                        <tr>
                            <td><div class="control-group">
                            	<label class="control-label" for="input01">Codeudor</label>
                            	<div class="controls"><input type="text" class="input-medium" name="codeudor" id="codeudor" value="{{ estudiante.codeudor }}"/></div>
                            </div></td>
                            
                            <td><div class="control-group">
                            	<label class="control-label" for="input01">Teléfono</label>
                                <div class="controls"><input type="text" class="input-medium" name="codeudor-telefono" id="codeudor-telefono" value="{{ estudiante.codeudor_telefono }}"/></div>
                            </div></td>
                        </tr>
                        <tr>
                            <td><div class="control-group">
                            	<label class="control-label" for="input01">Celular</label>
                            	<div class="controls"><input type="text" class="input-medium" name="codeudor-celular" id="codeudor-celular" value="{{ estudiante.codeudor_celular }}"/></div>
                            </div></td>
                            
                            <td><div class="control-group">
                            	<label class="control-label" for="input01">Email</label>
                            	<div class="controls"><input type="email" class="input-large" name="codeudor-email" id="codeudor-email" value="{{ estudiante.codeudor_email }}"/></div>
                            </div></td>
                        </tr>
                        
                    </table>
                    <table width="100%">
                    	<tr>
                        <td width="50%" style="text-align:center"><button type="button" id="cancelar" class="btn btn-primary btn-large" >Cancelar</button></td>
                        <td width="50%" style="text-align:center"><button type="submit" class="btn btn-primary btn-large" id="guardar">Guardar</button></td>
                        <input type="hidden" id="id_estudiante" name="id_estudiante" value="{{ estudiante.id }}"/>
                    </tr></table>
                    </form>
                </div>  <!-- /. Tab 1 -->
                <div class="tab-pane" id="tab2">
                	<div class="form-horizontal" >
                    <div id="csrf_token">{% csrf_token %}</div>	
                    <table width="100%">
                        <tr style="width:100%">
                            <td width="33%"><div class="control-group">
                            	<label class="control-label" for="input01">Facultad</label>
                                <div class="controls"><select name="facultad" id="facultad" class="input-large">
                                	<option semestres="0" value="0">NINGUNA</option>
                                    {% for facultad in Facultades %}
                                        <option semestres="{{ facultad.semestres }}" value="{{ facultad.id }}">{{ facultad.sigla }}</option>
                                    {% endfor %}
                                </select></div>
                            </div></td>
                            <td width="33%"><div class="control-group">
                                <label class="control-label" for="input01">Periodo</label>
                                <div class="controls"><select name="periodo" id="periodo" class="input-large" meses="88">
                                    <option meses="0" value="0">TODOS</option>
                                    {% for periodo in Periodos %}
                                        <option meses="{{ periodo.meses }}" value="{{ periodo.id }}">{{ periodo.nombre }}</option>
                                    {% endfor %}
                                </select></div>
                            </div></td>
							<td><div class="control-group">
                            	<label class="control-label" for="input01">Semestre</label>
                                <div class="controls"><select name="semestre" id="semestre" class="input-small">
                                    <option value="0">0</option>
                                </select></div>
                            </div></td>
                        </tr>
                        <tr>
                            <td><div class="control-group">
                                <label class="control-label" for="input01">Valor crédito</label>
                                <div class="controls"><input type="text" class="input-large" name="valor-credito" id="valor-credito" required="required" value="0"/></div>
                            </div></td>
							<td><div class="control-group">
                            	<label class="control-label" for="input01">Valor descuento</label>
                                <div class="controls"><input type="text" class="input-large" name="valor-descuento" id="valor-descuento" required="required" value="0"/></div>
                            </div></td>
							<td><div class="control-group">
                                <label class="control-label" for="input01">Número de cuotas</label>
                                <div class="controls"><input type="number" class="input-small" name="cuotas" id="cuotas" min="0" value="0"/></div>
                            </div></td>
                            
                        </tr>
						
                        <tr>
                            <td><div class="control-group">
                                <label class="control-label" for="input01">Cuota inicial</label>
                                <div class="controls"><input type="text" class="input-large" name="cuota-inicial" id="cuota-inicial" required="required" value="0"/></div>
                            </div></td>
							<td><div class="control-group">
                                <label class="control-label" for="input01">Intereses</label>
                                <div class="controls"><input type="text" class="input-large" name="intereses" id="intereses" required="required" value="0"/></div>
                            </div></td>
							<td><div class="control-group">
								<label class="control-label" for="input01">Fecha pago inicial:</label>
								<div class="controls">
									<input class="input-small" name="fecha-inicial" id="fecha-inicial" type="text" required="required" value="">
								</div>
							</div></td>
						</tr>
						<tr>
						<td></td>
						<td></td>
						<td style="text-align:center"><button type="button" class="btn" id="agregar" name="agregar">Agregar</button></td>
						</tr>
                    </table>
                    </div>
                    <!--</form>-->
                  	<div id="matriculas">
                    <div class="widget widget-table">
                            
                        <div class="widget-header">						
                            <h3>
                                <i class="icon-th-list"></i>
                                Histórico de matrículas		
                            </h3>
                        </div> <!-- /widget-header -->
                        <div class="widget-content">
                        <form name="frm_matriculas" id="frm_matriculas" action="/cartera/estudiantes/matriculas/borrar/" method="post" target="_blank" onsubmit="return OnSubmitForm();">
						{% csrf_token %}
                        	<input type="hidden" id="id_est" name="id_est" value="{{ estudiante.id }}"/>
                            <table class="table table-striped table-bordered table-highlight">
                                <thead>
                                    <tr>
                                        <th width="2%" align="center"></th>
										<th width="8%" align="center">Fecha</th>
										<th width="5%" align="center">Periodo</th>
										<th width="20%" align="center">Facultad</th>
										<th width="5%" align="center">Semestre</th>
										<th width="10%" align="center">Crédito</th>
										<th width="10%" align="center">Descuento</th>
										<th width="10%" align="center">Intereses</th>
										<th width="5%" align="center">Cuotas</th>
										<th width="10%" align="center">Saldo</th>
										<th width="15%" align="center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                {% for mat in matricula %}
                                <tr class="{% cycle '' 'odd' %}">
                                	<td><input type="checkbox" id="chk_{{mat.id}}" name="chk_{{mat.id}}" value="true"/></td>
            						<td>{{ mat.fecha|date:'d-m-Y' }}</td>
                                    <td>{{ mat.periodo.nombre }}</td>
                                    <td>{{ mat.facultad.nombre }}</td>
                                    <td style="text-align:center">{{ mat.semestre }}</td>
                                    <td style="text-align:right">{{ mat.valor_credito|intcomma }}</td>
									<td style="text-align:right">{{ mat.valor_descuento|intcomma|default_if_none:"" }}</td>
									<td style="text-align:right">{{ mat.intereses|intcomma|default_if_none:"" }}</td>
                                    <td style="text-align:center">{{ mat.cuotas }}</td>
                                    <td style="text-align:right">{{ mat.saldo|intcomma }}</td>
                                    <td style="text-align:center">
                                        <a href="#modalHistorial"  id="mat{{ mat.id }}" matricula="{{ mat.id }}" data-toggle="modal" class="acc_mat">
                                                <img src="{{ path }}images/24x24/calculator.png"  title="Ver historial de pagos y cartera."/>
                                        </a>
                                        <a href="#modalEditarMatricula"  id="edit{{ mat.id }}" matricula="{{ mat.id }}" data-toggle="modal" class="acc_edit">
                                                <img src="{{ path }}images/24x24/edit.png"  title="Editar registro de matrícula."/>
                                        </a>
										<a href="javascript:;" id="imp{{ mat.id }}" matricula="{{ mat.id }}" class="acc_imp">
											<img src="{{ path }}images/24x24/printer.png" title="Imprimir acuerdo de pago." value="ImprimirAcu"/>
										</a>
										{% if mat.saldo == 0 %}
										<a href="javascript:;" id="imp{{ mat.id }}" matricula="{{ mat.id }}" class="paz_imp">
											<img src="{{ path }}images/24x24/paz_y_salvo.png" title="Imprimir paz y salvo." value="ImprimirPaz"/>
										</a>
										{% endif %}
                                    </td>
                                </tr>
                            	{% endfor %}
                                </tbody>
                            </table>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary btn-medium" id="btn_eliminarHis" onclick="document.pressed=this.value" value="EliminarHis">Eliminar</button>
            					<button type="submit" class="btn btn-primary btn-medium" id="btn_reporteHis" onclick="document.pressed=this.value" value="ImprimirHis">Reporte</button>
                            </div>
                            </form>
                    	</div> <!-- /. widget-content -->
					</div> <!-- /. widget-table -->
                    </div> <!-- /. historial -->
                </div> <!-- /. Tab 2 -->
			</div>	<!-- /. Tab Content -->
		</div>	<!-- /. Tabbable -->
	</div> <!-- /widget-content -->
            
</div> <!-- /widget -->	
</div> <!-- /span 12 -->	



<!-- HISTORIAL DE PAGOS -->
<div class="modal fade hide" id="modalHistorial">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h3>Historial de pagos</h3>
  </div>
  	<form name="frm_historial" id="frm_historial" method="post" target="_blank" onsubmit="return OnSubmitForm();">
    	{% csrf_token %}
        <div id="historial" class="modal-body">
                        
        </div>
		
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Cerrar</a>
            <button type="submit" class="btn btn-primary btn-large" id="btn_imprimir" onclick="document.pressed=this.value" value="ImprimirCal">Imprimir calendario</button>
        </div>
	</form>
</div>
<!-- /modalHistorial -->




<!-- EDITAR MATRÍCULA -->
<div class="modal fade hide" id="modalEditarMatricula">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h3>Editar información de matrícula</h3>
  </div>
  	<form name="frm_editar_matricula" id="frm_editar_matricula" method="post">
    	{% csrf_token %}
        <div id="editar_matricula" class="modal-body">
		
        </div>
        <div class="modal-footer">
        	<a href="#" class="btn" data-dismiss="modal">Cerrar</a>
	    	<a href="#" id="btn_editar" data-dismiss="modal" class="btn btn-primary">Guardar matricula</a>
        </div>
	</form>
</div>
<!-- /modalHistorial -->
    
    
    
    
<!-- INTERFAZ DE PAGOS -->
<div class="modal fade hide" id="modalPagar">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h3>Pagar cuota</h3>
  </div>
  	<form id="form-pagar" class="form-horizontal">
    	<fieldset>
		<div id="pagar" class="modal-body">
                        
		</div>
        </fieldset>
	</form>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Cerrar</a>
    <a href="#" id="btn_pagar" data-dismiss="modal" class="btn btn-primary">Guardar pago</a>
  </div>
</div>
<!-- /modalPagar -->
{% endblock %}

